<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <h2>{{`总价$:${(num*price).toFixed(2)}`}}</h2>
    <h2 v-text="`总价$:${(num*price).toFixed(2)}`"></h2>
    <h2>{{total}}</h2>
    <h2>{{total2}}</h2>
    <h2>{{total3}}</h2>
    <button @click="chanageTotal3">修改total3</button>
    <hr>
    fistname: <input type="text" v-model="firstname"> <br />
    lastname: <input type="text" v-model="lastname"><br />
    <!-- 全名：<br /> <input type="text" :value="firstname+lastname" disabled><br /> -->
    <!-- 全名：<br /> <input type="text" :value="fullname" @change="fn"><br /> -->

    <!-- fullname是一个计算属性  v-model后面可以跟一个计算属性 -->
    全名：<br /> <input type="text" v-model.lazy="fullname"><br />
  </div>
  <script>
    let vm = new Vue({
      el: "#app",
      data() {
        return {
          name: "码路",
          num: 10,
          price: 100,
          msg: "123",
          firstname: "",
          lastname: ""
        }
      },
      methods: {
        chanageTotal3() {
          this.total3 = "456"
        },
        fn(e) {
          let arr = e.target.value.split(".");
          this.firstname = arr[0]
          this.lastname = arr[1]
        }
      },
      computed: {
        // 只有get
        total() {
          // 计算属性可以和data中的状态有关
          let t = (this.num * this.price).toFixed(2);
          return '总价：$' + t;
        },
        total2() {
          // 计算属性也可以和data中的状态无关
          return "666"
        },
        total3: {
          // 计算属性也可以修改，一般情况下，我们用的最多的，很少修改
          get() {
            console.log("get...");
            return this.msg
          },
          set(val) {
            console.log("set...");
            console.log(val);
            this.msg = val;
          }
        },
        fullname: {
          get() {
            return this.firstname + "." + this.lastname;
          },
          set(val) {
            console.log("set...");
            console.log(val);
            let arr = val.split(".");
            this.firstname = arr[0]
            this.lastname = arr[1]
          }
        }
      }
    });
  </script>
</body>

</html>